<template>
  <div id="info-window" style="display: none;" class="maps-info">
    <a-card :title="title">
      <template #extra>
        <a-button class="maps-close" type="link" @click="handleClose">关闭</a-button>
      </template>
      <div class="maps-info-title">
        {{ selectAddress.name }}
      </div>
      <div class="maps-info-address">
        {{ selectAddress.address }}
      </div>
      <div class="maps-info-footer" v-if="showFooter">
        <a-button class="maps-footer-button" type="primary" @click="handleConfirm">确认</a-button>
        <a-button class="maps-footer-button" @click="handleCancel">取消</a-button>
      </div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { unref, ref } from 'vue';

  const emit = defineEmits(['confirm', 'cancel']);
  const showFooter = ref(true)
  const tipConfirm = '请确认您的店铺地址'
  const tipConfirmed = '已确认地址'
  const title = ref(tipConfirm)
  const props = defineProps({
    selectAddress: { type: Object, default: {} },
  });

  const handleConfirm = () => {
    console.log('handleConfirm');
    title.value = tipConfirmed
    showFooter.value = false
    emit('confirm', unref(props.selectAddress))
  }

  const reset = () => {
    title.value = tipConfirm
    showFooter.value = true

  }

  const handleCancel = () => {
    console.log('handleConfirm');
    // @ts-ignore
    hidden()
    emit('cancel')
  }

  const handleClose = () => {
    title.value = tipConfirm
    showFooter.value = true
    hidden()
  }
  const hidden = () => {
    // @ts-ignore
    const style = document.getElementById("info-window")?.style
    if (style) {
      style.display = 'none'
    }
  }
  const show = () => {
    // @ts-ignore
    document.getElementById("info-window").style.display = 'inline';
  }
  defineExpose({ hidden, show, reset })
</script>
<style lang="less" scoped>
.maps-info {
  position: absolute;
  width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  border-radius: 2px;
  background: #fff;
  font-family: Microsoft YaHei;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.maps-info-title {
  color: #000;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 10px;
}

.maps-info-address {
  color: #b2b2b2;
  font-size: 14px;
  line-height: 20px;
}

.maps-info-footer {
  margin-top: 10px;
  line-height: 40px;
  text-align: center;
  border-top: 1px solid #eee;
}
.maps-footer-button {
  margin: 10px 10px -10px 10px;
}

.maps-close {
  margin-right: -20px;
}
</style>
